import { initMixin } from './init.js'
import { lifecycleMixin } from './lifecycle.js';
import { renderMixin } from './render.js';
import { initGlobalAPI } from './global-api/index'
import { complieToFunctions } from './compiler/index.js'
import { createElm, patch } from './vdom/patch.js'
import {stateMixin} from './initState'
//创建一个Vue的构造函数
//以原型式方法 混入各种不用模块功能
function Vue(options) {
    //console.log(options);
    //调用自己原型链的原型方法
    //debugger
    this._init(options)
}
//混入初始化
initMixin(Vue);
//扩展__update方法
lifecycleMixin(Vue);
//扩展__render方法
renderMixin(Vue);
//扩展全局api方法(Vue的静态方法,mixin,filter)
initGlobalAPI(Vue);


stateMixin(Vue)
/* //Vue实例1
let vm1 = new Vue({
    data() {
        return {
            name: 'jxw'
        }
    }
})
//将模板变成render函数
let render1 = complieToFunctions(`<div>
    <li key='A' style='background:red'>A</li>
    <li key='B' style='background:green'>B</li>
    <li key='C' style='background:yellow'>C</li>
    <li key='D' style='background:blue'>D</li>
    <li key='F' style='background:pink'>F</li>
</div>`)
//通过render函数将模板转成虚拟dom,老的虚拟dom
let oldVnode = render1.call(vm1)
//虚拟dom=>真实dom
let oldEl = createElm(oldVnode)
//渲染在页面
document.body.appendChild(oldEl)

//Vue实例2
let vm2 = new Vue({
    data() {
        return {
            name: 'dpj'
        }
    }
})
//将模板变成render函数
let render2 = complieToFunctions(`<div>
<li key='N' style='background:red'>N</li>
<li key='A' style='background:yellow'>A</li>
<li key='C' style='background:green'>C</li>
<li key='B' style='background:blue'>B</li>
<li key='E' style='background:purple'>E</li>
</div>`)
//通过render函数将模板转成虚拟dom,老的虚拟dom
let newVnode = render2.call(vm2)


console.log(oldVnode)
console.log(newVnode)
//patch包括了初渲染和diff算法
setTimeout(() => {
    patch(oldVnode, newVnode)
}, 2000)
 */

export default Vue;